<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv=Content-Type content="text/html; charset=utf-8">
  <meta http-equiv=X-UA-Compatible content="IE=edge">
  <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
  <meta name=apple-mobile-web-app-capable content=yes>
  <meta name=apple-mobile-web-app-status-bar-style content=black>
  <meta name=format-detection content="telephone=no">
  <meta http-equiv=X-UA-Compatible content="chrome=1">
  <meta name=renderer content=webkit>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Swiper demo</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
  <link rel="stylesheet" href="https://www.echartsjs.com/examples/stylesheets/main.css">
  <link href="https://at.alicdn.com/t/font_1086101_i2dobfnrsv.css" rel="stylesheet">
  <!-- <link rel="stylesheet" href="index.css"> -->
</head>
<style>
html, body {
    position: relative;
    height: 100%;
}
body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
}
[v-cloak] {
    display: none;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide h2 {
    color: rgb(226, 241, 10);
    background: transparent url(http://assets.dxycdn.com/app/event/20150306/img/heading-bg.png?t=2015030910) no-repeat;
    background-size: 284px 100px;
    background-position: 0 0;
    height: 25px;
    line-height: 25px;
    width: 284px;
    font-size: 18px;
    font-size: 1.8rem;
    padding-left: 10px;
    position: absolute;
    left: 0;
    top: 5%;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 1s ease-out; 
    transition: all 1s ease-out; 
}
/* .swiper-slide.swiper-slide-active h2 {
    -webkit-transform: translateX(0);
    transform: translateX(0);
} */
.swiper-slide.active h2 {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
@-webkit-keyframes bounce-down {
    25% {-webkit-transform: translateY(-10px);}
    50%, 100% {-webkit-transform: translateY(0);}
    75% {-webkit-transform: translateY(10px);}
}
@keyframes bounce-down {
    25% {transform: translateY(-10px);}
    50%, 100% {transform: translateY(0);}
    75% {transform: translateY(10px);}
}
.animate-bounce-down{ 
    position: absolute;
    bottom: 5%;
    font-size: 32px;
    -webkit-animation: bounce-down 1.5s linear infinite;
    animation: bounce-down 1.5s linear infinite;
}
@media (max-width: 575.98px) { 
    .start{ display: flex; height: 70%; align-items: center;}
    .start img{ width: 100%;}
}


@media (min-width: 576px) and (max-width: 767.98px) { 
    .start{ display: flex; height: 70%; align-items: center;}
    img{ width: 100%;}
}

@media (min-width: 768px) and (max-width: 991.98px) { 
    .start{ display: none;}
}


@media (min-width: 992px) and (max-width: 1199.98px) { 
    .start{ display: none;}
}


@media (min-width: 1200px) {
    .start{ display: none;}
}
</style>
<body>
  <!-- Swiper -->
<div class="swiper-container" id="app" v-cloak>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <!-- 首页 -->
                <div class="start">
                    <img src="image/start.jpg">
                </div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div>
            <!-- <div class="swiper-slide">
                <div>
                    <h1>概述</h1>
                    <p>推进政府数字化转型，建设数字政府是一场刀刃向内的政府治理革命。按照袁家军省长“政府数据的整合、开放、共享是建设数字政府，激发社会活力的核心”指示精神，为科学评估现状，省大数据局形成2019年上半年《浙江省公共数据报告》。</p>
                    <p><span>范围</span>涉及68家省级单位，11个设区市</p>
                    <p><span>组成</span>数据归集、数据治理、数据共享、数据开放</p>
                </div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div> -->
            <div class="swiper-slide">
                <!-- <h1>数据归集</h1> -->
                <h2>数据目录</h2>
                <div class="content">
                    <span class="contentTitle">截至6月</span>
                    <div>
                        公共数据目录共收录68家省级单位8,650类共157,745项数据项，可向社会公众开放11,590项
                    </div>
                </div>
                <div id="main0" style="width: 600px;height:400px;"></div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div>
            <div class="swiper-slide">
                <h1>数据归集</h1>
                <h2>数据归集量</h2>
                <div class="content">
                    <span class="contentTitle">截至6月</span>
                    <div>
                        全省累计已归集公共数据164亿条，今年1-6月 归集数据39亿条，比去年同期增长154.9%
                    </div>
                </div>
                <div id="main1" style="width: 600px;height:400px;"></div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div>
            <div class="swiper-slide">
                <h1>数据归集</h1>
                <h2>数据归集率</h2>
                <div class="content">
                    <span class="contentTitle">截至6月</span>
                    <div>
                        <p>全省已归集数据项37,923项</p>
                        <p>归集任务涉及50个省级单位18,711项数据项， 已归集17,810项，归集率95.2%</p> 
                        <p>34个单位归集率达100%,5个单位归集率低于90%</p>
                    </div>
                </div>
                <div id="main0" style="width: 600px;height:400px;"></div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div>
            <div class="swiper-slide">
                <h1>数据归集</h1>
                <h2>数据归集方式</h2>
                <div>
                    <p>全省98.6%的数据采用系统自动归集方式</p>
                    <p>17家省级单位549项数据项尚采用手工方式归集</p>
                    <p>5 个省级单位手工归集数据项占本单位全部归集数据项50%以上
                        <p>省国资委、省地方金融监管局、 省统计局、浙江证监局、国家统计局浙江调查总队</p>
                    </p>
                </div>
                <div id="main1" style="width: 600px;height:400px;"></div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div>
            <div class="swiper-slide">
                <h1>数据治理</h1>
                <h2>数据整改绩效</h2>
                <div>
                    <p>累计问题数据量增速趋缓，问题数据比例自 2018年9月以来持续下降，自2019年1月持续低于0.1%
                        <p>（问题数据比例是问题数据量占归集数据总量的比例）</p>
                    </p>
                </div>
                <div id="main2" style="width: 600px;height:400px;"></div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div>
            <div class="swiper-slide">
                <h1>数据治理</h1>
                <h2>数据完整性</h2>
                <div>
                    <span class="greemTitle">数据完整性问题</span>
                    <div>
                        <span>数据在时间、空间上覆盖不完整</span>
                        <span>关键数据项缺失</span>
                        <span>数据项存在空值</span>
                    </div>
                </div>
                <p>目前，已归集目录数据项中存在空值的1,726项，影响28.4亿条数据不完整，占已归集数据的17.3%</p>
                <div id="main3" style="width: 600px;height:400px;"></div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div>
            <div class="swiper-slide">
                <h1>数据治理</h1>
                <h2>数据及时性</h2>
                <div>
                    按照省政府办公厅数据归集要求，数源单位应根据
                    实际业务数据产生情况，确定每日、每月、每年等
                    更新周期，并在数据产生后4小时内及时归集至省
                    公共数据平台
                </div>
                <div class="content">
                    <span class="contentTitle">截至6月</span>
                    <p>39个单位213类数据未按规定及时更新（占10%）</p>
                </div>
                <div id="main4" style="width: 600px;height:400px;"></div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div>
            <div class="swiper-slide">
                <h1>数据治理</h1>
                <h2>数据整改率</h2>
                <div class="content">
                    <span class="contentTitle">截至6月</span>
                    <p>累计53个省级单位存在1,371类问题数据，已完成整改1,070类（占78%）</p>
                    <p>11个设区市共涉及75类问题数据，均已完成整改</p>
                </div>
                <div id="main5" style="width: 600px;height:400px;"></div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div>
            <div class="swiper-slide">
                <h1>数据共享</h1>
                <h2>需求对接率</h2>
                <div class="content">
                    <span class="contentTitle">截至6月</span>
                    <p>全省共提出数据需求75,149项，需求对接率达87.2%</p>
                    <p>共19个“8+13”重点项目提出数据需求28,059项,需求对接率达94.2%
                        <p>（需求对接率指已对接实现数占需求满足数的比例）</p>
                    </p>
                </div>
                <div id="main6" style="width: 600px;height:400px;"></div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div>
            <div class="swiper-slide">
                <h1>数据共享</h1>
                <h2>共享需求调用量</h2>
                <div class="content">
                    <span class="contentTitle">截至6月</span>
                    <p>省市两级数据共享平台的累计调用量达4.3亿次，6月当月调用3,835万次，是去年同期的6.3倍</p>
                </div>
                <div id="main7" style="width: 600px;height:400px;"></div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div>
            <div class="swiper-slide">
                <h1>数据共享</h1>
                <h2>数据共享贡献率</h2>
                <div>数据共享贡献率是指各单位数据被调用量占所有调用量的比例</div>
                <div class="content">
                    <span class="contentTitle">截至6月</span>
                    <p>共有43个省级单位做出了数据贡献，省公安厅贡献率最高</p>
                </div>
                <div id="main8" style="width: 600px;height:400px;"></div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div>
            <div class="swiper-slide">
                <h1>数据开放</h1>
                <h2>开放数据容量</h2>
                <div>
                    各单位开放数据容量是本单位所有开放数据集容量的总和
                    <p>（数据集容量=数据集的数据项*数据条数）</p>
                </div>
                <div class="content">
                    <span class="contentTitle">截至6月</span>
                    <p>开放数据容量达4.2亿，开放数据条数达4,000万（全国数据开放平均容量为1.45亿）</p>
                </div>
                <div id="main9" style="width: 600px;height:400px;"></div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div>
            <div class="swiper-slide">
                <h1>数据开放</h1>
                <h2>开放数据容量</h2>
                <div>
                    21个数据开放领域中，4个领域开放数据集总量较多
                    <p>生态环境、教育文件、市场监督、交通运输</p>
                </div>
                <div id="main9" style="width: 600px;height:400px;"></div>
                <i class="iconfont icondown animate-bounce-down"></i>
            </div>
        </div>
    
</div>

  <!-- Swiper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js"></script>
  <!-- Initialize Swiper -->
  
</body>
</html>
<script>
var app = new Vue({
    el: '#app',
    data: {
        
    },
    methods: {
        
    },
    computed: {
        
    },
    filters: {
        
    },
    mounted: function () {
        // setTimeout(() => {
        //     var swiper = new Swiper('.swiper-container',{
        //         // Optional parameters
        //         direction: 'vertical',
        //         loop: true
        //     });
        // },10)
        var swiper = new Swiper('.swiper-container',{
            // Optional parameters
            direction: 'vertical'
        });
        swiper.on('slideChangeTransitionEnd', function () {
            document.querySelector(".swiper-slide-active").className += " active";
            switch(swiper.realIndex)
            {
                case 0:
                var myChart = echarts.init(document.getElementById('main'+swiper.realIndex));
                myChart.setOption(option0);
                break;
                case 1:
                var myChart = echarts.init(document.getElementById('main'+swiper.realIndex));
                myChart.setOption(option1);
                break;
                case 2:
                var myChart = echarts.init(document.getElementById('main'+swiper.realIndex));
                myChart.setOption(option0);
                break;
                case 3:
                var myChart = echarts.init(document.getElementById('main'+swiper.realIndex));
                myChart.setOption(option2);
                break;
                case 4:
                var myChart = echarts.init(document.getElementById('main'+swiper.realIndex));
                myChart.setOption(option1);
                break;
                case 5:
                var myChart = echarts.init(document.getElementById('main'+swiper.realIndex));
                myChart.setOption(option2);
                break;
                case 6:
                var myChart = echarts.init(document.getElementById('main'+swiper.realIndex));
                myChart.setOption(option0);
                break;
                case 7:
                var myChart = echarts.init(document.getElementById('main'+swiper.realIndex));
                myChart.setOption(option1);
                break;
                case 8:
                var myChart = echarts.init(document.getElementById('main'+swiper.realIndex));
                myChart.setOption(option1);
                break;
                case 9:
                var myChart = echarts.init(document.getElementById('main'+swiper.realIndex));
                myChart.setOption(option1);
                break;
                default:
                break;
            }
        });
        var myChart = echarts.init(document.getElementById('main0'));
        
        var option0 = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        var option1 = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
            }]
        };
        var data = [];

        for (var i = 0; i <= 360; i++) {
            var t = i / 180 * Math.PI;
            var r = Math.sin(2 * t) * Math.cos(2 * t);
            data.push([r, i]);
        }

        var option2 = {
            title: {
                text: '极坐标双数值轴'
            },
            legend: {
                data: ['line']
            },
            polar: {
                center: ['50%', '54%']
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            angleAxis: {
                type: 'value',
                startAngle: 0
            },
            radiusAxis: {
                min: 0
            },
            series: [{
                coordinateSystem: 'polar',
                name: 'line',
                type: 'line',
                showSymbol: false,
                data: data
            }],
            animationDuration: 2000
        };
        myChart.setOption(option0);
        document.querySelector(".swiper-slide-active").className += " active";
    }
})
</script>